<template>
	<view class="card">
		<view class="content">
			<!-- 头部 -->
			<view class="head">
				<image :src="foodInfo.src" mode="widthFix" style=""></image>
				<text class="name">无油煎蛋</text>
				<view class="icon">
					每 「100克」 可食部 >
				</view>
			</view>
			<!-- 热量及营养信息 -->
			<view class="CAL">
				<text>热量及营养信息</text>
				<view class="kloa">167千卡</view>
				<view class="run">大约需走 6119步</view>
				<view class="Ring">
					<!-- 有待优化，难得改了 -->
					<view class="charts-box">
						<qiun-data-charts type="arcbar" :opts="opts1" :chartData='chartData1' />
					</view>
					<view class="charts-box">
						<qiun-data-charts type="arcbar" :opts="opts2" :chartData='chartData2' />
					</view>
					<view class="charts-box">
						<qiun-data-charts type="arcbar" :opts="opts3" :chartData='chartData3' />
					</view>
				</view>
			</view>
			<!-- 三大营养素 -->
			<view class="Three">
				<view class="table">
					<u-table>
						<u-tr>
							<u-th>营养素</u-th>
							<u-th>含量</u-th>
							<u-th>占比</u-th>
						</u-tr>
						<u-tr v-for="(item,index) in dataList">
							<u-td>{{item.title}}</u-td>
							<u-td>{{item.assay}}</u-td>
							<u-td>{{item.ratio}}%</u-td>
						</u-tr>

					</u-table>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				foodInfo: {
					src: 'https://img.js.design/assets/img/641e67a1f92e222c055c718d.png#7435650f945e72fdf01939d7618a1f75',
				},
				dataList: [{
						title: '碳水化合物',
						assay: 0.2,
						ratio: 20
					},
					{
						title: '蛋白质',
						assay: 6.2,
						ratio: 30
					},
					{
						title: '脂肪',
						assay: 5.8,
						ratio: 60
					}
				],
				chartData1: {},
				chartData2: {},
				chartData3: {},
				// 同样有待优化,难得优化了
				opts1: {
					title: {
						name: "10%",
						fontSize: 14,
						color: "#666666"
					},
					subtitle: {
						name: "碳水",
						fontSize: 14,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				opts2: {
					title: {
						name: "30%",
						fontSize: 14,
						color: "#666666"
					},
					subtitle: {
						name: "蛋白质",
						fontSize: 14,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				opts3: {
					title: {
						name: "60%",
						fontSize: 14,
						color: "#666666"
					},
					subtitle: {
						name: "脂肪",
						fontSize: 14,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
			};
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.title
			})

			uni.setNavigationBarColor({
				frontColor: 'rgba(73, 69, 75, 1)',
				backgroundColor: '#fff',
			})
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res1 = {
						series: [{
							name: "碳水",
							color: "rgba(65, 228, 185, 1)",
							data: 0.1
						},
						]
					};
					let res2 = {
						series: [{
							name: "蛋白质",
							color: "rgba(253, 215, 120, 1)",
							data: 0.3
						},
						]
					};
					let res3 = {
						series: [{
							name: "脂肪",
							color: "rgba(245, 149, 136, 1)",
							data: 0.6
						},
						]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res1));
					this.chartData2 = JSON.parse(JSON.stringify(res2));
					this.chartData3 = JSON.parse(JSON.stringify(res3));
				}, 500);
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: rgba(245, 246, 250, 1);
		font-family: '黑体';
	}

	.card {
		background-color: rgba(255, 255, 255, 1);
		width: 90%;
		margin-left: 5%;
		border-radius: 32rpx;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	}

	.head {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid rgba(240, 240, 240, 1);
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding: 30rpx 0;

		image {
			width: 120rpx;
			border-radius: 16rpx;
		}

		.name {
			font-size: 40rpx;
			margin-left: 40rpx;
		}

		.icon {
			padding: 6rpx;
			border-radius: 8rpx;
			background: rgba(255, 244, 242, 1);
			color: rgba(241, 137, 112, 1);
			font-size: 20rpx;
			margin-left: 100rpx;
		}
	}

	.CAL {
		// border-bottom: 2rpx solid rgba(240, 240, 240, 1);
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding: 20rpx 0;

		text {
			font-size: 30rpx;
		}

		.kloa {
			margin-top: 30rpx;
			font-size: 50rpx;
			text-align: center;
		}

		.run {
			color: rgba(166, 166, 166, 1);
			font-size: 18rpx;
			text-align: center;
		}

		.Ring {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-around;
			.charts-box {
			    width: 225rpx;
			    height: 200rpx;
			  }
		}
	}

	.Three {
		.table {
			padding: 50rpx 10rpx 150rpx 10rpx;
		}
	}
</style>